<template>
  <div class="weather-info">
    <!-- 搜索区域 -->
    <el-card class="search-card">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="地区">
          <el-input v-model="searchForm.region" placeholder="请输入地区"></el-input>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker
            v-model="searchForm.date"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 天气信息展示 -->
    <el-row :gutter="20" class="info-section">
      <el-col :span="12">
        <el-card class="weather-card">
          <div slot="header">
            <span>天气信息</span>
          </div>
          <div class="weather-content">
            <el-table :data="weatherData" style="width: 100%">
              <el-table-column prop="date" label="日期" width="180"></el-table-column>
              <el-table-column prop="weather" label="天气"></el-table-column>
              <el-table-column prop="temperature" label="温度"></el-table-column>
              <el-table-column prop="wind" label="风向风力"></el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card class="road-card">
          <div slot="header">
            <span>路况信息</span>
          </div>
          <div class="road-content">
            <el-table :data="roadData" style="width: 100%">
              <el-table-column prop="road" label="道路名称"></el-table-column>
              <el-table-column prop="status" label="路况状态">
                <template slot-scope="scope">
                  <el-tag :type="getStatusType(scope.row.status)">
                    {{ scope.row.status }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="description" label="详细说明"></el-table-column>
              <el-table-column prop="updateTime" label="更新时间" width="180"></el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 天气预警信息 -->
    <el-card class="alert-card">
      <div slot="header">
        <span>天气预警</span>
      </div>
      <div class="alert-content">
        <el-timeline>
          <el-timeline-item
            v-for="(alert, index) in alertData"
            :key="index"
            :type="getAlertType(alert.level)"
            :timestamp="alert.time"
            placement="top"
          >
            <el-card>
              <h4>{{ alert.title }}</h4>
              <p>{{ alert.content }}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'WeatherInfo',
  data() {
    return {
      searchForm: {
        region: '',
        date: ''
      },
      weatherData: [], // 天气数据
      roadData: [], // 路况数据
      alertData: [] // 预警数据
    }
  },
  methods: {
    handleSearch() {
      // 调用后端接口获取数据
      console.log('Search form:', this.searchForm)
    },
    resetSearch() {
      this.searchForm = {
        region: '',
        date: ''
      }
    },
    getStatusType(status) {
      const types = {
        '通畅': 'success',
        '缓行': 'warning',
        '拥堵': 'danger'
      }
      return types[status] || 'info'
    },
    getAlertType(level) {
      const types = {
        '红色': 'danger',
        '橙色': 'warning',
        '黄色': 'warning',
        '蓝色': 'info'
      }
      return types[level] || 'info'
    }
  }
}
</script>

<style scoped>
.weather-info {
  padding: 20px;
}

.search-card {
  margin-bottom: 20px;
}

.info-section {
  margin-bottom: 20px;
}

.weather-card,
.road-card,
.alert-card {
  margin-bottom: 20px;
}

.weather-content,
.road-content {
  min-height: 300px;
}

.alert-content {
  padding: 20px 0;
}

.el-timeline-item {
  padding-bottom: 20px;
}

.el-card {
  margin-bottom: 10px;
}

.el-card h4 {
  margin: 0 0 10px 0;
  color: #303133;
}

.el-card p {
  margin: 0;
  color: #606266;
  line-height: 1.6;
}
</style> 